<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">ERP-IDEA小组</el-header>
            <el-container>
                <el-aside width="200px">
                    <SideMenu @menuClick="handleMenuClickEvent" />
                </el-aside>
                <el-main class="right">
                    <component :is="currentComponent"></component>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import AddCustomer from "@/views/AddCustomer";
import ListCustomer from "@/views/ListCustomer";
import ListSellJh from "@/views/ListSellJh";
import ListAfterSale from "@/views/ListAfterSale";
import ListOrder from "@/views/ListOrder";
import AddSellJh from "@/views/AddSellJh";
import SideMenu from '@/components/SideMenu.vue';
import AddMenu from "./AddMenu.vue";
import axios from 'axios';
import { onMounted, ref,shallowRef  } from "vue";
import RoleManager from "./RoleManager.vue";
import UserManager from "./UserManager.vue";
import CategoryManager from "./CategoryManager.vue";
import ItemManager from "./ItemManager.vue";
import BuyListMnager from "./BuyListMnager.vue";
export default {
    components: {
        SideMenu
    }, setup() {
        const views = [AddCustomer, ListCustomer, ListAfterSale, ListOrder, AddSellJh,,,ListSellJh, AddMenu, RoleManager, UserManager, CategoryManager, ItemManager, BuyListMnager]
        const currentComponent = shallowRef(views[0])
        function handleMenuClickEvent(id) {
            console.log('select: ', id);
            axios.get("http://localhost:8081/compIndex?id=" + id).then((response) => {
                currentComponent.value = views[response.data]

            }).catch((error) => {
                console.log(error)
            })

        }
        // const handleMenuClickEvent = function (id) {
        //     console.log('select: ', id);
        //     axios.get("http://localhost:8081/compIndex?id=" + id).then((response) => {
        //         currentComponent.value = views[response.data]
        //     }).catch((error) => {
        //         console.log(error)
        //     })

        // }

        return {
            handleMenuClickEvent,
            currentComponent
        }
    }
}
</script>

<!-- <script setup>
import AddCustomer from "@/views/AddCustomer.vue"
import ListCustomer from "@/views/ListCustomer.vue"
import { ref } from "vue";
const views = [AddCustomer, ListCustomer]
const currentComponent = ref(views[0])
function handleMenuClickEvent(id) {
    console.log('select: ', id);
    axios.get("http://localhost:8081/compIndex?id=" + id).then((response) => {
        currentComponent.value = views[response.data]

    }).catch((error) => {
        console.log(error)
    })

}
</script> -->

<style scoped>
.header {
    background-color: rgb(95, 125, 151);
    padding-top: 15px;
}
</style>